<template>
  <div class="duty_statics">
    <div class="dutyAll">
      <div class="census">
        <van-tabs
          type="card"
          v-model="activeChild"
          @change="onChangeChild"
          title-active-color="#ad7316"
          title-inactive-color="#333333"
          v-if="['2', '4'].includes(showAll)">
          <van-tab title="我的统计"></van-tab>
          <van-tab title="部门统计" v-if="showAll === '2'"></van-tab>
          <van-tab title="统计汇总" v-if="showAll === '4'"></van-tab>
        </van-tabs>
        <!-- 个人统计 -->
        <div class="self" v-if="activeChild === 0 && showAll !== '3'">
          <div class="statics_gather" @click="goOneGather">
            <div class="gather_left">考勤汇总</div>
            <van-icon name="arrow" />
          </div>
          <div class="info_time">
            <div class="info">
              <div class="user-head">
                <van-image
                  class="user-icon"
                  :src="userInfo.headUrl"
                  round
                  width="39px"
                  height="39px"
                  fit="cover"
                  v-if="userInfo && userInfo.headUrl"></van-image>
                <van-image
                  class="user-icon"
                  :src="userInfo.gender === '2' ? circleUrlW : circleUrlM"
                  round
                  width="39px"
                  height="39px"
                  fit="cover"
                  v-else></van-image>
              </div>
              <div class="info_right">
                <div class="info_right_top">{{ userInfo.userName }}</div>
                <div class="info_right_bottom">
                  <span>{{ userInfo.orgName }}</span>
                </div>
              </div>
            </div>
            <div class="time" @click="timeChoose(dutyTime)">
              {{ dutyTime }}
              <van-icon name="arrow-down" />
            </div>
          </div>
          <div class="self_head">
            <span>每日统计</span>
            <span>规则:{{ workTime.attendanceRole }}</span>
            <span>标准:{{ workTime.attendanceStandard }}</span>
          </div>
          <Calendar ref="calendar" pageTypes="1" @selectDate="selectDate"></Calendar>
          <div class="day_info">
            <div class="choose_day">{{ dutyMonth }}月{{ dutyDayInfo.content }}日考勤：</div>
            <div class="choose_show" v-if="!isFuture && dutyDayInfo.statusList && dutyDayInfo.statusList.length">
              <div class="status_time">
                <span>考勤状态</span>
                <span class="s_time">
                  <div v-if="dutyDayInfo.statusList && dutyDayInfo.statusList.length">
                    <div v-for="(oneDay, index) in dutyDayInfo.statusList" :key="index">
                      <span v-if="oneDay.dailyId" class="status_left_check" @click="goToDutyDetail(oneDay)">
                        {{ oneDay.attendanceStatus }}
                      </span>
                      <span v-else>{{ dutyDayInfo.isWork == '0' ? '休息' : '正常' }}</span>
                    </div>
                  </div>
                </span>
              </div>
            </div>
            <div class="choose_show" v-else>暂无数据！</div>
          </div>
        </div>
        <!-- 部门统计 -->
        <div class="section" v-if="activeChild === 1 || showAll == '3'">
          <div class="info_time" @click="goToGather">
            <div class="info">
              <div class="info_right">考勤汇总</div>
            </div>
            <van-icon name="arrow" />
          </div>
          <div class="info_time">
            <div class="info">
              <div class="info_right">每日统计</div>
            </div>
            <div class="time" @click="timeChoose(dutyTime)">
              {{ dutyTime }}
              <van-icon name="arrow-down" />
            </div>
          </div>
          <Calendar ref="calendar" pageTypes="2" @selectDate="selectDate"></Calendar>
          <div @click="goOutDetail('12')">
            <PanelProgress ref="panelProgress"></PanelProgress>
          </div>
          <div class="leave-box" v-if="dutyStaticsOne.leaveCount > 0">
            <div class="head">
              <span class="gather_main_title">请假</span>
              <span class="one_count">{{ dutyStaticsOne.leaveCount }}人</span>
            </div>
            <div class="late" v-for="item in allDepartment" :key="item.dailyId">
              <div class="self_info">
                <div class="iconfont icontouxiang6"></div>
                <div class="info_right">
                  <div class="info_right_top">{{ item.userName }}</div>
                  <div class="info_right_bottom">
                    <div class="position_date">
                      <span class="department">{{ item.orgName }}</span>
                      <span>{{ item.postName }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="self_status">{{ item.leaveTypeName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="请选择时间"
        :min-date="minDate"
        @cancel="showTime = false"
        @confirm="timeConfirm" />
    </van-popup>
  </div>
</template>

<script>
import {
  getAttendanceRoleAndStandard,
  getUserStatisticsCalendar,
  getOrgStatisticsSum,
  getOrgStatisticsDetail,
} from '@api/api-attendance.js'
import Calendar from '../components/calendarNew.vue'
import PanelProgress from '../components/PanelProgress.vue'
import moment from 'moment'
export default {
  name: 'DutyStaticsListNew',
  components: {
    Calendar,
    PanelProgress,
  },
  props: {
    showAll: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      showTime: false, //是否展示时间弹出层
      minDate: new Date(2023, 0, 1), // 最小限制时间
      currentDate: new Date(), // 当前时间
      userInfo: JSON.parse(localStorage.userInfo),
      activeChild: 0, // 考勤统计相关参数
      dutyYear: '', // 出勤年
      dutyMonth: '', // 出勤月
      listTime: '',
      percentage: 0,
      workTime: {},
      isFuture: false,
      departmentNum: {}, // 部门考勤汇总统计数字
      allDepartment: [], // 科室列表
      dutyTime: '', // 统计选择时间
      dutyDayInfo: {}, // 选择日期的信息
      dutyStaticsOne: {}, //统计信息-当日
      calendarOneDays: '', // 日历上的数据
      activeName3: '0',
      rotePage: 'DutyStaticsListNew',
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  watch: {},
  filters: {
    Month(val) {
      return Number(val) < 10 ? '0' + val : val
    },
  },
  created() {
    let routeLength = this.rotePage.length
    if (this.$store.state.pageTabTwo.substring(0, routeLength) == this.rotePage) {
      this.activeChild = Number(this.$store.state.pageTabTwo.substring(this.rotePage.length))
    }
    this.timeNow()
    this.getWorkTime()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.calendar.getHeight()
    })
    if (this.showAll !== '3' && this.activeChild == 0) {
      //个人统计
      this.calendarStatistics()
    } else {
      //获取日历数据部门
      this.getOrgTimes()
    }
  },
  methods: {
    //获取工作时间
    getWorkTime() {
      getAttendanceRoleAndStandard({}).then(res => {
        this.workTime = res.data
      })
    },
    // 获取当前时间
    timeNow() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let m1 = m < 10 ? '0' + m : m
      let d1 = d < 10 ? '0' + d : d
      this.dutyYear = String(y)
      this.dutyMonth = String(m)
      this.chooseTime = String(y) + '年' + String(m) + '月'
      this.dutyTime = String(y) + '年' + String(m) + '月'
      this.writeTime = String(y) + '年' + String(m1) + '月' + String(d1) + '日'
      this.listTime = String(y) + '-' + String(m1)
    },
    // 选择时间
    timeChoose(time) {
      this.showTime = true
      if (time) {
        let y = time.slice(0, 4)
        let m = time.slice(5, time.length - 1)
        this.currentDate = new Date(y, m - 1)
      } else {
        this.currentDate = new Date()
      }
    },
    // 获取当前日的信息
    selectDate(data) {
      this.isFuture = false
      if (new Date(this.dutyYear, this.dutyMonth - 1, data.content).getTime() < new Date(2021, 2, 1).getTime()) {
        this.isFuture = true
      }
      if (new Date(this.dutyYear, this.dutyMonth - 1, data.content).getTime() > new Date().getTime()) {
        this.isFuture = true
      }
      if (this.activeChild === 0 && this.showAll != '3') {
        this.dutyDayInfo = data
      } else if (this.activeChild === 1 || this.showAll == '3') {
        this.calendarOneDays = data.timeOne
        this.orgCalendarStatistics()
        this.selectAllDepartment()
      }
    },
    onChangeChild(val) {
      this.$store.state.pageTabTwo = this.rotePage + val
      this.timeNow()
      this.$refs.calendar.changeWeek()
      this.$refs.calendar.getHeight()
      if (val === 0) {
        this.calendarStatistics()
      } else {
        this.getOrgTimes()
      }
    },
    // 获取科室-统计
    selectAllDepartment() {
      getOrgStatisticsDetail({
        currentPage: 1,
        pageSize: 10000,
        param: {
          startTime: this.calendarOneDays,
          endTime: this.calendarOneDays,
          userId: '',
          isLeaveCancel: '',
          leaveId: '',
          loginUserId: this.userInfo.userId,
          orgId: '',
          type: '1',
        },
      }).then(res => {
        if (res.status === 200) {
          this.allDepartment = res.data.content
        }
      })
    },
    // 时间确定
    timeConfirm() {
      this.showTime = false
      let date = new Date(this.currentDate)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let m1 = m < 10 ? '0' + m : m
      this.chooseTime = String(y) + '年' + String(m) + '月'
      this.dutyTime = String(y) + '年' + String(m) + '月'
      this.listTime = String(y) + '-' + String(m1)
      if (this.activeChild === 0 && this.showAll != '3') {
        this.calendarStatistics()
      } else {
        this.getOrgTimes()
      }
      this.dutyYear = String(y)
      this.dutyMonth = String(m)
    },
    // 获取日历数据个人
    calendarStatistics() {
      getUserStatisticsCalendar({
        startTime: moment(this.listTime).startOf('month').format('YYYY-MM-DD'),
        endTime: moment(this.listTime).endOf('month').format('YYYY-MM-DD'),
        userId: this.userInfo.userId,
        isLeaveCancel: '',
        leaveId: '',
        loginUserId: this.userInfo.userId,
        orgId: this.userInfo.loginPostInfo.orgId,
        type: '0',
      }).then(res => {
        if (res.status === 200) {
          let data = {
            info: res.data,
            time: this.listTime,
          }
          this.$refs.calendar.calendarShowData(data)
        }
      })
    },

    getOrgTimes() {
      let data = {
        info: [],
        time: this.listTime,
      }
      this.$nextTick(() => {
        this.$refs.calendar.calendarShowData(data)
      })
    },

    // 获取日历数据部门-统计数据
    orgCalendarStatistics() {
      getOrgStatisticsSum({
        startTime: this.calendarOneDays,
        endTime: this.calendarOneDays,
        userId: '',
        orgId: '',
      }).then(res => {
        if (res.status === 200) {
          this.dutyStaticsOne = res.data
          this.$nextTick(() => {
            this.$refs.panelProgress.getData(res.data)
          })
        }
      })
    },

    // 跳转部门统计
    goDepartment(item) {
      this.$router.push({
        path: '/outAllPages',
        query: { pageTypes: '4', year: this.dutyYear, month: this.dutyMonth, item: JSON.stringify(item) },
      })
    },

    // 跳转考勤统计-部门
    goToGather() {
      this.$router.push({ path: '/outAllPages', query: { pageTypes: '3', year: this.dutyYear, month: this.dutyMonth } })
    },
    //个人考勤汇总
    goOneGather() {
      this.$router.push({ path: '/outAllPages', query: { pageTypes: '1', year: this.dutyYear, month: this.dutyMonth } })
    },
    // 跳转考勤明细
    goOutDetail(type1) {
      // this.$router.push({
      //   path: '/outAllPages',
      //   query: {
      //     pageTypes: '2',
      //     typeTabs: type1,
      //     timesDay: this.calendarOneDays,
      //     infos: JSON.stringify(this.dutyStaticsOne),
      //   },
      // })
    },
    //跳转个人详情
    goToDutyDetail(item) {
      this.$router.push({
        path: '/detailOutDuty',
        query: {
          id: item.dailyId,
          formId: item.formId,
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
          type: '3',
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.duty_statics {
  font-size: 13px;
  .dutyAll {
    background-color: #f9f9f9;
    padding: 10px;
    .statics_gather {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      border-bottom: 1px solid #efefef;
      height: 35px;
      .gather_left {
        font-weight: bold;
        font-size: 14px;
      }
    }
    .census {
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      /deep/.van-tabs {
        border-bottom: 1px solid #e1e1e1;
        .van-tabs__wrap {
          height: 35px;
          line-height: 35px;
        }
        .van-tabs__nav--card {
          margin: 0;
          height: 35px;
          line-height: 35px;
          // font-size: 14px;
          border: none;
        }
        .van-tabs__nav--card .van-tab.van-tab--active {
          background-color: #ffffff;
          border: none;
        }
        .van-tabs__nav--card .van-tab {
          background-color: #f9f9f9;
          border: none;
        }
      }
    }

    .self {
      background-color: #ffffff;
      padding: 0 0 15px;
      .info_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #efefef;
        .info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #333333;
          padding: 6px 15px;
          .user-head {
            margin-right: 15px;
          }
          .info_right {
            .info_right_top {
              font-size: 14px;
            }
            .info_right_bottom {
              display: flex;
              // justify-content: space-between;
              align-items: center;
              font-size: 13px;
              margin-top: 5px;
              color: #999999;
            }
          }
        }
        .time {
          font-size: 12px;
          color: #333;
          margin-right: 10px;
        }
      }

      .self_head {
        color: #999999;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        margin: 0 15px;
        border-bottom: 1px solid #efefef;
        span:first-child {
          color: #333333;
          font-size: 14px;
          font-weight: bold;
        }
      }
      .day_info {
        margin-top: 20px;
        color: #333333;
        font-size: 12px;
        padding: 0 15px;

        .choose_show {
          padding: 10px 16px;
          border-radius: 4px;
          background-color: #fdf1dd;
          margin-top: 10px;
          text-align: center;
          .status_time {
            display: flex;
            align-items: center;
            .s_time {
              margin-left: 10px;
            }
          }
        }
        .status_left_check {
          color: #409eff;
        }
        .status_left_warn {
          color: #ad7316;
        }
      }
    }
    .section {
      background-color: #ffffff;
      padding: 0 0 15px;
      .info_time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #efefef;
        .info {
          color: #333333;
          padding: 6px 15px;
          .info_right {
            font-size: 14px;
            font-weight: bold;
            .info_right_top {
              font-size: 14px;
              font-weight: normal;
            }
          }
        }
        .time {
          font-size: 12px;
          color: #333;
          margin-right: 10px;
        }
        /deep/.van-icon-arrow {
          font-size: 14px;
          margin-right: 13px;
        }
      }

      .self_head {
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        padding: 10px 0;
        margin: 0 15px;
        border-bottom: 0.01333rem solid #efefef;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .info_time {
          border-bottom: none;
          font-weight: normal;
        }
      }
      .section_info {
        background-color: #f7f7f7;
        margin: 0 10px;
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .tab_title {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #333333;
          font-size: 12px;
          .num {
            color: #ad7316;
            font-size: 19px;
          }
        }
        .empty {
          font-size: 12px;
        }
      }
      .num_unit {
        color: #999999;
        font-size: 12px;
        text-align: right;
        margin: 0 10px 5px 0;
      }
      .depart_info {
        font-size: 12px;
        color: #333333;
        padding: 0 5px;
        margin-top: 16px;
        /deep/.van-col {
          text-align: center;
          &:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .head {
          color: #999999;
        }
        .cont_box {
          margin-right: 20px;
          margin-top: 5px;
          .cont {
            padding: 9px 0;
          }
        }
      }
    }
    .leave-box {
      position: relative;
      padding: 0 15px;
      .head {
        margin-bottom: 15px;
        .gather_main_title {
          font-weight: bold;
          font-size: 14px;
        }
        .one_count {
          margin-left: 10px;
          background-color: #fdeed7;
          border-radius: 2px;
          padding: 3px 10px;
        }
      }
      .late {
        font-size: 12px;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #ffffff;
        box-shadow: 0 0 5px 0 rgba(4, 0, 0, 0.15);
        padding: 0 12px;
        margin: 10px 0;
        .self_info {
          padding: 6px 0;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #333333;
          border-bottom: 1px solid #efefef;
          .iconfont {
            font-size: 30px;
            color: #999999;
            margin-right: 10px;
          }
          .info_right {
            .info_right_top {
              // font-size: 14px;
            }
            .info_right_bottom {
              margin-top: 3px;
              .department {
                margin-right: 20px;
              }
            }
          }
        }
        .self_status {
          color: #969799;
        }
      }
    }
  }
}
</style>
